{extend name="base" /}
{block name="body"}
<div class="layui-card">
    <div class="layui-card-body">
        <form action="{:request()->url()}" class="layui-form" method="post">
            <div class="layui-col-md6">
                {if input('customer_id') == '' && empty($data.customer_id)}
                <div class="layui-form-item">
                    <label class="layui-form-label">客户</label>
                    <div class="layui-input-block">
                        <select name="customer_id" lay-search lay-verify="required">
                            <option value="">请选择客户</option>
                            {foreach name="customer" item="v"}
                            <option value="{$v.id}" {if condition="isset($data) and $data.customer_id eq $v.id"}selected="selected"{/if}>{$v.name} - {$v.mobile}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                {/if}
            </div>
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">合同编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="contract_no" value="{$data.contract_no|default='HT'.build_order_no()}" autocomplete="off" placeholder=""  class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">签单日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="datetime" class="layui-input" id="datetime" value="{$data.datetime|default=date('Y-m-d')}" placeholder="" autocomplete="off" lay-verify="required">
                    </div>
                    <div class="layui-form-mid layui-word-aux">签订合同的日期</div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">签单人</label>
                    <div class="layui-input-inline">
                        <select name="user_id" lay-search lay-verify="required">
                            <option value="">请选择员工</option>
                            {foreach name="user" item="v"}
                            <option value="{$v.id}" {if condition="isset($data) and $data.user_id eq $v.id"}selected="selected"{/if}>{$v.name} - {$v.mobile}</option>
                            {/foreach}
                        </select>
                    </div>
                    <div class="layui-form-mid layui-word-aux">负责本合同的人员</div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">生效日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="start_time" class="layui-input" id="start_time" value="{$data.start_time|default=date('Y-m-d')}" placeholder="" autocomplete="off" lay-verify="required">
                    </div>
                    <div class="layui-form-mid layui-word-aux">合同开始生效的时间</div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">到期日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="end_time" class="layui-input" id="end_time" value="{$data.end_time|default=date('Y-m-d',strtotime('+1 year'))}" placeholder="" autocomplete="off" lay-verify="required">
                    </div>
                    <div class="layui-form-mid layui-word-aux">服务到期时间</div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">关联产品</label>
                    <div class="layui-input-block">
                        <div id="otherXmSel" class="" ></div>
                        <input type="hidden" id="assist" name="product" value="{$data.product|default=''}" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">合同金额</label>
                    <div class="layui-input-inline">
                        <input type="text" name="price" class="layui-input" value="{$data.price|default='0.00'}" placeholder="" autocomplete="off" lay-verify="required">
                    </div>
                    <div class="layui-form-mid layui-word-aux">元</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">合同附件</label>
                <div class="layui-input-block">
                    <input type="text" name="file" value="{$data.file|default=''}" autocomplete="off" placeholder="请上传合同附件(PDF,word,excel等)" class="layui-input">
                    <button type="button" class="layui-btn  layui-btn-position ajax-file"><i class="fa fa-file-image-o"></i> 选择文件</button>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">合同备注</label>
                <div class="layui-input-block">
                    <textarea name="remark" class="layui-textarea">{$data.remark|default=''}</textarea>
                </div>
            </div>
            <div class="layui-form-item" id="pics">
                <div class="layui-form-label">合同照片</div>
                <div class="layui-input-block" style="width: 70%;">
                    <div class="layui-upload">
                        <div class="pic-more">
                            <ul class="mitpic" id="slide-pc-priview">
                                <li class="item_img ajax-photos" style="cursor:pointer">
                                    <img src="/static/img/upload-img.png" class="img" width="120" height="120">
                                </li>
                                {if condition="!empty($data['photo'])"}
                                {foreach name="data.photo" item="v"}
                                <li style="position:relative" class="mitpicli" title="点击后开始拖动排序">
                                    <img src="{$v}" width="120" height="120">
                                    <div class="close img_close">X</div>
                                    <input type="hidden" name="photo[]" value="{$v}" />
                                </li>
                                {/foreach}
                                {/if}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-filter="i" lay-submit="">保存</button>
                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
{/block}
{block name="js"}
<!--多图拖拽排序JS-->
<script type="text/javascript" src="/static/js/jquery-migrate-1.1.1.js"></script>
<script type="text/javascript" src="/static/js/jquery.dragsort-0.5.1.min.js"></script>
<script>
    laydate.render({
        elem: '#datetime'
        ,trigger:'click'
    });
    laydate.render({
        elem: '#start_time'
        ,trigger:'click'
    });
    laydate.render({
        elem: '#end_time'
        ,trigger:'click'
    });
    layui.use(['xmSelect'], function () {
        var $ = layui.jquery;
        var xmSelect = layui.xmSelect;

        // 渲染多选下拉
        var otherXmSel = xmSelect.render({
            el: '#otherXmSel',
            filterable: true,
            paging: true,
            pageSize: 5,
            toolbar: {show: true},
            data: {:json_encode($product)},
            on: function(data){
                //arr:  当前多选已选中的数据
                var arr = data.arr;
                //定义新的ID数组
                var id = new Array();
                //遍历所有值
                $.each(arr,function(index,r){
                    id[index] = r.value;
                });
                //数组转字符串
                new_id= id.join(",");
                //赋值
                $('#assist').attr('value',new_id);
            },
        });
        otherXmSel.setValue([{$data.product|default=''}])
    });
</script>
{/block}